<template>
	<view class="bg-white">
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="key==TabCur?'text-pink cur':''" v-for="(item,key) in dateYyjl" :key="key"
				@tap="tabSelect" :data-id="key">
				{{key}}
			</view>
		</scroll-view>
		<view>
			<view class="padding" v-show="key==TabCur" v-for="(item,key) in dateYyjl" :key="key">
				<view class="shadow round">
					<view v-for="(to,tey) in item" :key="tey">
						<view v-if="to.aroomyyjlitem">
							<view class="cu-list menu-avatar">
								<view class="cu-item">
									<view class="cu-avatar round lg"
										:style="'background-image:url('+(to.ajiaolian.cover ? to.ajiaolian.cover : to.amdjl.cover)+');'"></view>
									<view class="content flex-sub">
										<view class="text-grey">
											<text v-if="to.akecheng">{{to.akecheng.kcname}}</text>
											<text v-else>未设置课程</text>
											<text>-</text>
											<text v-if="to.akechengitem">{{to.akechengitem.itemname}}</text>
											<text v-else>未设置章节</text>
										</view>
										<view class="text-gray text-sm flex justify-between">
											<view>{{to.ajiaolian.jlname ? to.ajiaolian.jlname : to.amdjl.mdjlname}}</view>
											<view class="text-gray text-sm">
												<text
													class="icon icon-daikeyuyue margin-lr-xs">{{to.aroomyyjlitem.st}}</text>
												<text>~</text>
												<text
													class="icon icon-daikeyuyue margin-lr-xs">{{to.aroomyyjlitem.et}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="cu-list menu-avatar">
								<view class="cu-item">
									<view class="check round lg">
										<checkbox :checked="to.check" @click="checkTo(tey, to)"></checkbox>
									</view>
									<view class="content flex-sub">
										<view class="text-grey flex justify-between align-center">
											<text>未设置课程-未设置章节</text>
											<text>￥{{to.aroomhourlyprices.price / 100}}</text>
										</view>
										<view class="text-gray text-sm flex justify-between">
											<view>没有老师预约</view>
											<view class="text-gray ">
												<text
													class="icon icon-daikeyuyue margin-lr-xs">{{to.aroomhourlyprices.st}}</text>
												<text>~</text>
												<text
													class="icon icon-daikeyuyue margin-lr-xs">{{to.aroomhourlyprices.et}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dateYyjl: {
				type: Object,
				default: function() {
					return {};
				}
			},
		},
		mounted: function() {
		},
		watch: {
			dateYyjl: function(newval, oldval) {
				if (this.dateYyjl) {
					let keys = Object.keys(this.dateYyjl);
					if (keys.length > 0) {
						this.TabCur = keys[0];
					}
				}
				this.yyjls = {};
				this.$emit("datesChange", this.yyjls);
			},
		},
		data() {
			return {
				TabCur: "",
				scrollLeft: 0,
				yyjls: {},
			};
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			checkTo: function(tey, to) {
				to.checked = !to.checked;
				if (to.checked) {
					this.yyjls[to.cd+"@"+tey] = to;
				} else {
					delete this.yyjls[to.cd+"@"+tey];
				}
				this.$emit("datesChange", this.yyjls);
			}
		}
	}
</script>

<style scoped>
	.check {
		position: absolute;
		left: 30rpx;
	}
</style>